{{ header }}
<div id="account-forgotten" style="background-image:url({{ forgotten_background_image }})">
    <div class="container">
        {#{{ include(helper.template('_partial/breadcrumb')) }}#}
        {% if error_warning %}
            <div class="alert alert-danger alert-dismissible"><i
                        class="fa fa-exclamation-circle"></i> {{ error_warning }}

            </div>
        {% endif %}
        <div class="row">
            {#{{ column_left }}#}

            <div id="content" class="col-sm-12">
                {{ content_top }}
                {#<p> TODO 重置手机密码直接访问 App 的接口使用相同流程即可 {{ api_host }}</p>#}
                <div class="forgotten-wrapper">


                    <h1>{{ heading_title }}</h1>
                    <div class="reset-pane">

                        <ul class="nav nav-tabs">

                            <li id="tab-mobile" {{ register_type == 'mobile' ? 'class="active"' }}>
                                <a href="#pane-mobile" data-toggle="tab">{{ text_tab_mobile }}</a>
                            </li>
                            <li id="tab-email" {{ register_type != 'mobile' ? 'class="active"' }}>
                                <a href="#pane-email" data-toggle="tab">{{ text_tab_email }}</a>
                            </li>
                        </ul>

                        <div class="tab-content mt-2">
                            <div class="tab-pane active" id="pane-email">
                        {#<p>{{ text_email }}</p>#}
                                <form action="{{ action }}" method="post" enctype="multipart/form-data" >
                                    <fieldset>
                                        {#<legend>{{ text_your_email }}</legend>#}
                                        <div class="form-group required">
                                            <label class="col-sm-2 control-label hidden" for="input-email">{{ entry_email }}</label>
                                            <div class="">
                                                <input type="text" name="email" value="{{ email }}" placeholder="{{ entry_email }}"
                                                       id="input-email" class="form-control"/>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <div class="buttons ">
                                        <input type="submit" value="{{ button_submit }}" class="btn btn-primary"/>
                                    </div>
                                </form>
                            </div>
                                <div class="tab-pane " id="pane-mobile">
                                    <form>
                                        <fieldset>
                                            <div class="form-group required telephone-wrapper">
                                                <div class="dial_code">
                                                    <input name="dial_code" value="86" class="form-control">
                                                </div>
                                                <div class="dot telephone">
                                                    <input type="tel" name="telephone"
                                                           value="{{ telephone }}"
                                                           placeholder="{{ entry_telephone }}"
                                                           id="mobile-telephone"
                                                           class="form-control"/>
                                                    <div class="text-danger"></div>
                                                </div>
                                            </div>
                                            <div class="form-group required">
                                                <div class="verify-code">
                                                    <input type="text" placeholder="{{ entry_verify_code }}" name="verify_code" value=""
                                                           id="input-email" />
                                                    <button class="btn btn-primary">{{ entry_verify_code }}</button>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="buttons">
                                            <input type="submit" value="{{ button_submit }}" class="btn btn-primary"/>
                                        </div>
                                    </form>
                                </div>
                            </div>
                    </div>

                    <div class="success-pane">
                        <div class="success-pane-icon">
                            <img src="/catalog/view/theme/{{ helper.config('theme_default_directory') }}/image/ok@2x.png" alt="">
                        </div>
                        <h3 class="success-pane-title">{{ text_success }}</h3>
                        <p class="success-pane-tips">
                            {{ text_tips }}<a href="/index.php?route=account/login">{{ text_go_to_login }}></a>
                        </p>
                    </div>
                </div>
                {{ content_bottom }}
            </div>


            {#{{ column_right }}#}
        </div>
    </div>
</div>


<script>

    $(function () {
        var verify_code_api = '/api/v1/app/common/send-reset-pwd-verify-code';
        var reset_pwd_api = '/api/v1/app/customer/reset-pwd';
        var $telephone = $('#pane-mobile input[name="telephone"]');
        var $verifyCode = $('#pane-mobile input[name="verify_code"]');
        var $dialCode = $('#pane-mobile input[name="dial_code"]');

        $('.verify-code button.btn').click(function (e) {
            e.preventDefault();
            if($telephone.val().length >5) {
                // 禁用按钮
                disableButton($(e.target));
                // 添加倒计时提示
                var tips = addCountdownTips($(e.target), 60, function () {
                    // 倒计时完成回调
                    enableButton($(e.target));
                });
                // 发送验证码
                asyncRequest(verify_code_api, {
                    "telephone": $telephone.val(),
                    "debug":1,
                    "dial_code": $dialCode.val(),
                }, function (data) {
                    // layer.open({
                    //     skin: 'layer-alert',
                    //     content: '请注意查收',
                    //     btnAlign: 'c',
                    // });
                }, function (error) {
                    layer.open({
                        skin: 'layer-alert',
                        btnAlign: 'c',
                        title: ' ',
                        content: error.message
                    });
                    enableButton($(e.target));
                    tips.clear();
                })
            }else {
                layer.open({
                    skin: 'layer-alert',
                    btnAlign: 'c',
                    title: ' ',
                    content: '{{ text_invalid_phone }}'
                });
            }
        });

        /**
         * 禁用按钮
         * @param  $btn
         */
        function disableButton($btn){
            $btn.addClass('disabled')
                .prop('disabled', true);
        }

        /**
         * 启用按钮
         */
        function enableButton($btn) {
            $btn.removeClass('disabled')
                .prop('disabled', false);
        }

        /**
         * 添加倒计时提示
         * @param {Object} $btn
         * @Param {Number} duration
         * @Param {Function} cb
         */
        function addCountdownTips($btn, duration, cb) {
            var originText = $btn.text();
            var timer = window.setInterval(function () {
                $btn.text(duration + 's');
                duration = duration -1;
                if (duration === 0) {
                    window.clearInterval(timer);
                    $btn.text(originText);
                    cb.call(null)
                }
            } ,1000);
            return {
                // 清除定时器方法
                clear: function () {
                    window.clearInterval(timer);
                    $btn.text(originText);
                }
            }
        }

        /**
         * 发送验证码
         * @param url
         * @param body
         * @param successFn
         * @param errorFn
         */
        function asyncRequest(url, body, successFn, errorFn) {
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: body,
                success: function(response) {
                    if(response.code !== 0) {
                        errorFn.call(null, new Error(response.error))
                    }else {
                        successFn.call(null, response);
                    }
                },
                error: function (error) {
                    errorFn.call(null, error)
                }
            });
        }

        /**
         *  处理重置密码
         */
        $('#pane-mobile input[type="submit"]').click(function (e) {
            e.preventDefault();
            var telphone = $telephone.val();
            var verifyCode =$verifyCode.val();
            var dialCode = $dialCode.val();
            if (telphone.length <5 || verifyCode.length !== 6) {
                layer.open({
                    skin: 'layer-alert',
                    btnAlign: 'c',
                    title: ' ',
                    content: '{{ text_invalid_form }}'
                });
            } else {
                asyncRequest(reset_pwd_api, {
                    type: 'telephone',
                    telephone: telphone,
                    verify_code: verifyCode,
                    dial_code: dialCode,
                }, function (response) {
                    showSuccessPane()
                }, function (error) {
                    layer.open({
                        skin: 'layer-alert',
                        btnAlign: 'c',
                        title: ' ',
                        content: error.message
                    });
                })
            }
        })

        /**
         *
         */
        function showSuccessPane() {
            $('.reset-pane').hide();
            $('.success-pane').show();
        }

    })


</script>

<link href="catalog/view/javascript/dial-code.css" rel="stylesheet">
<script type="text/javascript" src="catalog/view/javascript/initialize-dial-code.js"></script>
<script>
    /**
     * 初始化选择
     * @type {boolean}
     */
    var isChinese = /^zh/.test("{{ code }}");
    $('input[name="dial_code"]').dialCode({
        isChinese: isChinese,
    })
</script>
{{ include(helper.template('account/common_style')) }}

{{ footer }}